<template>

  <div style="width: 100%;height: 300px">
    <el-image style="height:100%;width: 100%"
              src="https://cdn.dribbble.com/userupload/16400072/file/original-d1ea79d5292cce343228a6b1c40aa136.jpg"
              fit="fill"/>
  </div>
  <div>
    <el-input placeholder="我们的口号是什么!" v-model="ourSlogan"/>
  </div>
  <div v-show="isChooseNumber">
    <div  style="display: flex;justify-content: left;align-items: center">
      <p>选号区: </p>
      <el-select
          v-model="selectPerson"
          placeholder="请选择号码分区"
          size="small"
          style="width: 240px"
      >
        <el-option
            v-for="item in selectOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>

    </div>
    <div>
      <p>选号结果 : {{chooseLotteryNumer}}</p>
    </div>
    <div >
      <div v-for="(rule,index) in selectRule" :key="index" >
        <div v-if="rule.name == selectPerson" :id="rule.name+'choose'">
          <p>请 {{ rule.name == 'wzx' ? '轩' : rule.name == 'hyh' ? '豪' :'康' }} 输入{{ rule.postion == 'pre' ? '前区' : '后区' }} 的 {{ rule.num }} 位号码</p>
          <div v-for="(item,index) in (rule.num)" :key="index" style="margin-bottom: 10px">
            <input :name="index"/>
          </div>
          <el-button type="primary" size="small" @click="chooseNumber(rule.name,rule.postion,rule.num)">确定</el-button>
        </div>

      </div>
    </div>
  </div>




  <h1>天降横财三千万</h1>
  <!--  v-if="ourSlogan=='合购'" 是否通知过期-->

  <div style="display: flex">

    <div style="display: flex ;">
      <p style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
         v-for="item in lottery_number.hegounum_pre" :key="item.num">{{ item.num }}</p>

      <p style="background-color: #0c38e7;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px"
         v-for="item in lottery_number.hegounum_suf" :key="item.num">{{ item.num }}</p>

    </div>

    <div style="text-align: center;margin-top: 12px;margin-left: 30px">
      <el-button :icon="MoreFilled" @click="getLotteryTicketHistory('hg')" circle/>
    </div>

  </div>
  <div v-if="ourSlogan=='海龟靓仔'" style="display: flex;align-items: center">
    <el-button :icon="User" color="#b7d3e7" circle />
    <p style="margin-left: 10px">豪</p>
  </div>
  <div v-if="ourSlogan=='海龟靓仔'" style="display: flex">
    <div style="display: flex ;">
      <p style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
         v-for="item in lottery_number.hyhnum_pre" :key="item.num">{{ item.num }}</p>

      <p style="background-color: #0c38e7;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px"
         v-for="item in lottery_number.hyhnum_suf" :key="item.num">{{ item.num }}</p>

    </div>
    <div style="text-align: center;margin-top: 12px;margin-left: 10px">
      <el-button :icon="Edit" circle @click="editLottery('hyh')"/>
      <el-button :icon="MoreFilled" @click="getLotteryTicketHistory('hyh')" circle/>
    </div>
  </div>
  <div v-if="ourSlogan=='王振轩'" style="display: flex;align-items: center">
    <el-button :icon="User" color="#b7d3e7" circle />
    <p style="margin-left: 10px">轩</p>
  </div>
  <div v-if="ourSlogan=='王振轩'" style="display: flex">
    <div style="display: flex ;">
      <p style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
         v-for="item in lottery_number.wzxnum_pre" :key="item.num">{{ item.num }}</p>

      <p style="background-color: #0c38e7;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px"
         v-for="item in lottery_number.wzxnum_suf" :key="item.num">{{ item.num }}</p>
    </div>
    <div style="text-align: center;margin-top: 12px;margin-left: 10px">
      <el-button :icon="Edit" circle @click="editLottery('wzx')"/>
      <el-button :icon="MoreFilled" @click="getLotteryTicketHistory('wzx')" circle/>
    </div>
  </div>
  <div v-if="ourSlogan=='苏镇康'" style="display: flex;align-items: center">
    <el-button :icon="User" color="#b7d3e7" circle />
    <p style="margin-left: 10px">康</p>
  </div>
  <div v-if="ourSlogan=='苏镇康'" style="display: flex">
    <div style="display: flex ;">
      <p style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
         v-for="item in lottery_number.szknum_pre" :key="item.num">{{ item.num }}</p>

      <p style="background-color: #0c38e7;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px"
         v-for="item in lottery_number.szknum_suf" :key="item.num">{{ item.num }}</p>
    </div>
    <div style="text-align: center;margin-top: 12px;margin-left: 10px">
      <el-button :icon="Edit" circle @click="editLottery('szk')"/>
      <el-button :icon="MoreFilled" @click="getLotteryTicketHistory('szk')" circle/>
    </div>
  </div>

  <!--  编辑弹窗-->
  <el-dialog
      v-model="centerDialogVisible"
      title="请输入你的幸运号码"
      width="500"
      align-center
      destroy-on-close
      draggable
  >

    <div style="display: flex ;">
      <input
          style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
          v-model="i1"/>
      <input
          style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
          v-model="i2"/>
      <input
          style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
          v-model="i3"/>
      <input
          style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
          v-model="i4"/>
      <input
          style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
          v-model="i5"/>

      <input
          style="background-color: #0c38e7;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px"
          v-model="i6"/>
      <input
          style="background-color: #0c38e7;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px"
          v-model="i7"/>
      <el-input
          style="width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 20px"
          label="期"
          v-model="i7"/>
      <span style="height: 30px;text-align: center;justify-content: center;align-items: center;display: flex">期</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="changeLotteryOk">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--  历史开奖弹窗-->

  <el-drawer v-model="ndrawer" title="I am the title" :with-header="false">
    <div class="demo-collapse">
      <el-collapse accordion>
        <el-collapse-item :title="hist.time_number" :name="hist.time_number" v-for="hist in history_lottery"
                          :key="hist">
          <div>
            期号
          </div>
          <div>
            {{ hist.time_number }}
          </div>
          <div>
            开奖日期
          </div>
          <div>
            {{ hist.openLotteryTime }}
          </div>
          <div>
            开奖号码:
          </div>
          <div style="display: flex ;">

            <p style="background-color: #c31717;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px "
               v-for="item in hist.open_number_pre" :key="item.num">{{ item.num }}</p>

            <p style="background-color: #0c38e7;color: aliceblue;width: 30px;height: 30px;text-align: center;border-radius: 20px;margin-left: 2px"
               v-for="item in hist.open_number_suf" :key="item.num">{{ item.num }}</p>

          </div>
          <div>
            中奖金额:{{ hist.getMoney }}
          </div>
        </el-collapse-item>

      </el-collapse>
    </div>
  </el-drawer>

</template>

<script>
import {
  User,
  Edit,
  MoreFilled
} from '@element-plus/icons-vue'
import {apiAcceptData, apiSend} from "@/api";

export default {
  name: "LotteryQuartz",
  data() {
    return {
      ndrawer: false,
      centerDialogVisible: false,
      User:User,
      Edit: Edit,
      MoreFilled: MoreFilled,
      ourSlogan: "",
      lottery_number: [],
      history_lottery: [],
      currentName: '',
      i1: "0",
      i2: "0",
      i3: "0",
      i4: "0",
      i5: "0",
      i6: "0",
      i7: "0",
      numOfPeriod: 5,
      selectPerson: '',
      chooseLotteryNumer:'',
      isChooseNumber:true,
      selectOptions: [
        {value: "wzx", label: "轩"},
        {value: "hyh", label: "豪"},
        {value: "szk", label: "康"}
      ],

      selectRule: {}
    }

  },
  methods: {
    // 确认选择号码
    async chooseNumber(name,postion,num) {

      // 获取div内所有的input元素
      var inputs = document.querySelectorAll('#'+name+'choose input');

      // 创建一个数组来存储input的值
      var inputValues = Array.from(inputs).map(input => input.value);
      for(var i=0;i<inputValues.length;i++){
        if(this.isNotNumber(inputValues[i])){
          this.$message.error("请输入纯数字")
          return
        }
        if(postion == 'pre'){
          if(inputValues[i] <1 || inputValues[i]>32){
            this.$message.error("请输入有效号码，前区号码：1-32，后区号码：1-12")
            return;
          }
        }else{
          if(inputValues[i] <1 || inputValues[i]>12){
            this.$message.error("请输入有效号码，前区号码：1-32，后区号码：1-12")
            return;
          }
        }

      }
      const params = {
        postion:postion,
        inputValues:inputValues,
        num:num
      }
      const apiResult = await apiAcceptData("/lottery/updateChoose", params)

      // 等待方法执行完成
      setTimeout(() => {

        this.isChooseNumber = !apiResult.finish
        this.chooseLotteryNumer = apiResult.lotternum
        // 更新号码列表
        this.getValidLottery();
      }, 1000)


    },
    editLottery(name) {
      console.log("name:" + name)
      this.centerDialogVisible = true;
      this.currentName = name
    },
    // 修改彩票并将之前的彩票置为无效,   确认
    async changeLotteryOk() {

      // 判断期数是否纯数字
      if (this.isNotNumber(this.numOfPeriod)) {
        this.$message.error("期号请输入纯数字")
        return
      }
      // 期数限制在 1-5
      if (this.numOfPeriod < 1 || this.numOfPeriod > 5) {
        this.$message.error("期号请输入1-5之间的数字")
        return
      }


      // 判断是否纯数字
      if (this.isNotNumber(this.i1) || this.isNotNumber(this.i2) || this.isNotNumber(this.i3) || this.isNotNumber(this.i4) || this.isNotNumber(this.i5) || this.isNotNumber(this.i6) || this.isNotNumber(this.i7)) {
        this.$message.error("请输入纯数字")
        return
      }
      if (this.i1 == '' || this.i2 == '' || this.i3 == '' || this.i4 == '' || this.i5 == '' || this.i6 == '' || this.i7 == '') {
        this.$message.error("请输入完整号码")
        return
      }

      if (this.i1 <= 0 || this.i1 > 32 || this.i2 <= 0 || this.i2 > 32 || this.i3 <= 0 || this.i3 > 32 || this.i4 <= 0 || this.i4 > 32 || this.i5 <= 0 || this.i5 > 32
          || this.i6 <= 0 || this.i6 > 12 || this.i7 <= 0 || this.i7 > 12) {
        this.$message.error("请输入有效号码，前区号码：1-32，后区号码：1-12")
        return
      }
      // 判断 i1 ,i2 ,i3 ,i4 i5  不能重复
      if (this.i1 == this.i2 || this.i1 == this.i3 || this.i1 == this.i4 || this.i1 == this.i5
          || this.i2 == this.i3 || this.i2 == this.i4 || this.i2 == this.i5
          || this.i3 == this.i4 || this.i3 == this.i5
          || this.i4 == this.i5) {
        this.$message.error("前区号码不能重复")
        return
      }
      if (this.i6 == this.i7) {
        this.$message.error("后区号码不能重复")
        return
      }

      const params = {
        lotteryChangedNum: this.addZero(this.i1) + " " + this.addZero(this.i2) + " " + this.addZero(this.i3) + " " + this.addZero(this.i4) + " " + this.addZero(this.i5)
            + " " + this.addZero(this.i6) + " " + this.addZero(this.i7),
        name: this.currentName
      }

      // 发送请求
      await apiSend("/lotteryTicket/updateLotteryTicket", params)
      // 等待方法执行完成
      setTimeout(() => {
        // 更新页面数据
        // 规整 前端的号码
        this.i1 = "0"
        this.i2 = "0"
        this.i3 = "0"
        this.i4 = "0"
        this.i5 = "0"
        this.i6 = "0"
        this.i7 = "0"
        this.getValidLottery()
        this.centerDialogVisible = false


      }, 1000)


    },
    // 验证是否为数字
    isNotNumber(value) {
      // var reg=/^[1-9]\d*$|^0$/
      var reg = /^\d+$/
      if (reg.test(value)) {
        return false
      } else {
        return true
      }
    },
    // 小于10 的数字在前面加上 0
    addZero(value) {
      if (value < 10 && value.length == 1) {
        value = "0" + value
      }
      return value
    },
    // 获取当前投注的号码
    async getValidLottery() {

      const apiResult = await apiAcceptData('/lotteryTicket/getValidLotteryTicket', null);
      this.lottery_number = apiResult

    },

    async getLotteryTicketHistory(name) {
      const params = {
        name: name
      }
      const apiResult = await apiAcceptData('/lotteryTicket/getLotteryTicketHistory', params);
      this.history_lottery = apiResult
      this.ndrawer = true
    },
    async getIsChooseNumber(){
      const apiResult = await apiAcceptData('/lottery/isChoose', null);
      // 等待方法执行完成
      setTimeout(() => {
        // 更新页面数据
        this.isChooseNumber = apiResult


      }, 100)

    },
    async getSelectRule(){
      const apiResult = await apiAcceptData('/lottery/getChooseRule', null);
      console.log(apiResult)
      // 等待方法执行完成
      setTimeout(() => {
        // 更新页面数据
        this.selectRule = apiResult

      }, 100)
    }

  },
  // mounted() {
  //   this.getIsChooseNumber();
  // },
  created() {
    this.getSelectRule()
    this.getIsChooseNumber();
    this.getValidLottery();
  }
}
</script>

<style scoped>

</style>